import { defineStore } from 'pinia'

export const useExamplesStore = defineStore('examples', {
    state: () => ({
        examples: [
            {
                id: '1',
                title: 'HTML 基础布局',
                description: '一个简单的响应式布局示例',
                tags: ['html', 'css'],
                initialCode: {
                    html: `<div class="container">
  <header>
    <h1>欢迎访问</h1>
    <nav>
      <a href="#home">首页</a>
      <a href="#about">关于</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>主要内容</h2>
      <p>这是一个简单的响应式布局示例。</p>
    </article>
  </main>
</div>`,
                    css: `.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #3A568A;
  color: white;
  border-radius: 8px;
}

nav {
  display: flex;
  gap: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

main {
  margin-top: 2rem;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 1rem;
  }
}`,
                    javascript: ''
                }
            },
            {
                id: '2',
                title: '交互动画示例',
                description: '使用 javascript 制作简单的动画效果',
                tags: ['html', 'css', 'javascript'],
                initialCode: {
                    html: `<div class="animation-container">
  <div class="box"></div>
  <button id="animateBtn">开始动画</button>
</div>`,
                    css: `.animation-container {
  padding: 2rem;
  text-align: center;
}

.box {
  width: 100px;
  height: 100px;
  background: #3A568A;
  margin: 2rem auto;
  transition: transform 0.3s ease;
}

button {
  padding: 8px 16px;
  background: #6B40E3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}`,
                    javascript: `document.getElementById('animateBtn').addEventListener('click', function() {
  const box = document.querySelector('.box');
  box.style.transform = box.style.transform === 'rotate(360deg)' 
    ? 'rotate(0deg)' 
    : 'rotate(360deg)';
});`
                }
            }
        ]
    }),

    getters: {
        getExampleById: (state) => {
            return (id) => state.examples.find(example => example.id === id)
        }
    }
})